<template>
	<view>
		<!-- <view class="page"></view> -->
		<view :style="{ height: $store.state.StatusBar.statusBar + 'px' }"></view>
		<view class="my">我的</view>
		<view class="z_index2 flex_r fa_c top" @click="toUserInfo">
			<view class="top-img">
				<image class="img" :src="info.pic" mode="aspectFill"></image>
			</view>
			<view class="flex1 flex_r fa_c top-infr">
				<view class="flex1">
					<view class="flex_r fa_c top-infr-name">
						<view class="c-fff">
							{{ info.nick }}
						</view>
						<view class="top-infr-icon">
							<!-- 男 -->
							<image class="img" src="./img/ic_boy.png" mode="aspectFill"
								style="width: 25rpx; height: 25rpx;" v-if="1==info.sex"></image>
							<!-- 女 -->
							<image class="img" src="./img/ic_girl.png" mode="aspectFill"
								style="width: 25rpx; height: 25rpx;" v-if="2==info.sex"></image>
						</view>
					</view>
					<view class="c-primary text_26">
						ID:{{ info.tengxuncode }}
					</view>
				</view>
				<view class="top-infr-icon">
					<image class="img" src="./img/more_1x.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="vip" @tap="to('/pages/m-pages/m-vip/index')" v-if="false">
			<image class="img-bg" src="./img/ic_mine_vip_bg.png"></image>
			<view class="vip-content">
				<view class="vip-left">
					<view class="left-top">
						<image class="img-vip" src="./img/ic_mine_vip.png" mode="aspectFill"></image>
						<view class="vip-title">开通会员</view>
					</view>
					<view class="vip-content" v-if="info.vipMap.isVip">
						将于{{ info.vipMap.vipEndDate }}过期
					</view>
					<view class="vip-content" v-else>开通贵族|享文字免费畅聊</view>
				</view>
				<view class="vip-right">
					<view class="vip-btn" v-if="info.vipMap.isVip">立即续费</view>
					<view class="vip-btn" v-else>立即开通</view>
					<image class="img-arrow" src="./img/ic_mine_arrow.png"></image>
				</view>
			</view>
		</view>

		<view>
			<view class="cell p-24 flex flex-between items-center" @click="kefu">
				<view class="flex items-center">
					<image class="img" src="./img/ic_mine_kefu.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;">
					</image>
					<text class="c-fff ml-12">在线客服</text>
				</view>
				<view class="right-icon">
					<image class="img" src="./img/more_1x.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="line"></view>
			
			<view class="cell p-24 flex flex-between items-center" @click="goAgreement">
				<view class="flex items-center">
					<image class="img" src="./img/ic_mine_look_me.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;">
					</image>
					<text class="c-fff ml-12">用户协议</text>
				</view>
				<view class="right-icon">
					<image class="img" src="./img/more_1x.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="line"></view>
			
			<view class="cell p-24 flex flex-between items-center" @click="goPrivacy">
				<view class="flex items-center">
					<image class="img" src="./img/ic_mine_wallet.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;">
					</image>
					<text class="c-fff ml-12">隐私政策</text>
				</view>
				<view class="right-icon">
					<image class="img" src="./img/more_1x.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="line"></view>
			
			<view class="cell p-24 flex flex-between items-center"
				@click="handleRouter('/pages/m-pages/m-settle/index')">
				<view class="flex items-center">
					<image class="img" src="./img/ic_mine_set.png" mode="aspectFill"
						style="width: 36rpx;height: 36rpx;  margin-left:7rpx; margin-top:7rpx;">
					</image>
					<text class="c-fff ml-12">设置</text>
				</view>
				<view class="right-icon">
					<image class="img" src="./img/more_1x.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="line"></view>
		</view>


		<uni-popup ref="popup" type="center" v-if="false">
			<view class="popup">
				<view class="popup-bc">
					<image class="img" src="./img/ic_sign_bg.png" mode="aspectFill"></image>
				</view>
				<view class="flex_r fa_c z_index2 popup-remind">
					<view class="text_24">
						签到提醒
					</view>
					<view class="flex_r remind" @click="onRemind">
						<view class="remind-str" :class="{ flex1: isRemind }"></view>
						<view class="remind-item"></view>
					</view>
				</view>

				<view class="flex_c z_index2 fj_c title">
					<view class="text_36">
						已连续签到0天
					</view>
					<view class="text_24">
						连续签到7日大礼
					</view>
				</view>

				<view class="z_index2 list">
					<view class="flex_c_c list-item"
						:class="[`fingerboard-item-${index}`, index == 0 ? 'label_item' : '']"
						v-for="(item, index) in 7">
						<view class="list-item-img">
							<image class="img" src="./img/task_zuanshi.png" mode="aspectFill"></image>
						</view>
						<view class="text_28 label_item_text">
							钻石+{{ index }}
						</view>
					</view>
				</view>

				<view class="z_index2 button size_white size_white">
					签到
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				isRemind: false,
				info: {},
				funList1: [
					// {
					// 	name: '任务中午',
					// 	icon: require('./img/ic_mine_kefu.png')
					// },
					{
						name: '我的钱包',
						icon: require('./img/ic_mine_wallet.png')
					}
					// ,{
					// 	name: '装扮商城',
					// 	icon: require('./img/ic_mine_shop.png')
					// },
				],
				funList2: [
					// {
					// 	name: '实名认证',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_shimirenzhen.png')
					// },
					// {
					// 	name: '会员中心',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_huiyuanzhongxin.png')
					// },'
					// {
					// 	name: '谁看过我',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_look_me.png')
					// },
					// {
					// 	name: '协议',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_xieyi.png')
					// },
					// {
					// 	name: '在线客服',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_kefu.png')
					// },
					{
						name: '设置',
						path: '/im/personal/personal',
						icon: require('./img/ic_mine_set.png')
					}
				]
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			to,
			toUserInfo(){
				uni.navigateTo({
					url:'/pages/m-pages/m-userinfos/index'
				})
			},
			onRemind() {
				this.isRemind = !this.isRemind
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			kefu() {
				uni.showModal({
					title: '客服',
					content: `客服QQ：2778027813 工作时间9：00-18：00`
				})
			},
			goAgreement() {
				getApp().globalData.webviewUrl='https://www.xksndf2002.cn/agreement-lalaq.html'
				uni.navigateTo({
					url: '/pages/webview/webview'
				})
			},
			goPrivacy() {
				getApp().globalData.webviewUrl='https://www.xksndf2002.cn/privacy-lalaq.html'
				uni.navigateTo({
					url: '/pages/webview/webview'
				})
			},
			handleRouter(path) {
				// uni.showToast({
				// 	title: '跳转',
				// 	icon: 'none',
				// });
				uni.navigateTo({
					url: path,
				});
			},
			async getInfo() {
				let res = await this.$c.post('/app/usermessage/getMessage')
				if (res.code != 0) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				}
				this.info = res.data
				console.log("this.info: " + JSON.stringify(this.info));
			},
		}
	}
</script>
<style lang="scss" scoped>
	.my {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 36rpx;
		color: #f7f2f1;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.popup {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		width: 640rpx;
		border-radius: 26rpx;
		overflow: hidden;
		background-image: linear-gradient(to top, #fff, #f4fff1);

		.popup-bc {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.popup-remind {
			height: 100rpx;
			margin-left: 20rpx;

			.remind {
				margin-left: 20rpx;
				width: 110rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: #dcdcdc;

				.remind-str {
					transition: all 0.3s;
				}

				.remind-item {
					position: relative;
					top: -10rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #efefef;
				}
			}
		}

		.title {
			height: 120rpx;
			margin-left: 20rpx;
		}

		.list {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 200rpx 200rpx;
			grid-gap: 8px;

			.list-item {
				border-radius: 20rpx;
				background-image: linear-gradient(to left, #f5f5ff, #f5f5ff);

				.list-item-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
			}

			.label_item {
				background-image: linear-gradient(to left, #c787ff, #fdaeff, #fdaeff);

				.label_item_text {
					color: #fff
				}
			}

			.fingerboard-item-6 {
				grid-column: 3 / 5;
			}
		}

		.button {
			width: 100%;
			height: 80rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 80rpx;
			margin-top: 30rpx;
			background-color: #191923;
		}

	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.top {
		width: calc(100% - 60rpx);
		height: 180rpx;
		margin: 0 auto;

		.top-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
		}

		.top-infr {
			.top-infr-name {}

			.top-infr-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}
	}


	.member {
		position: relative;
		box-sizing: border-box;
		padding: 30rpx;
		width: calc(100% - 60rpx);
		height: 140rpx;
		border-radius: 20rpx;
		margin: 0 auto 30rpx auto;
		background-color: #fff;
		overflow: hidden;

		.member-bc {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
		}

		.member-img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
			margin-left: 10rpx;
		}

		.member-icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}
	}


	.fun {
		box-sizing: border-box;
		padding: 20rpx;
		width: calc(100% - 60rpx);
		margin: 0 auto 30rpx auto;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.1);

		.fun-title {
			width: 100%;
			height: 50rpx;
		}

		.fun-box {
			box-sizing: border-box;
			width: 100%;
			padding: 0rpx 10rpx;
			flex-wrap: wrap;

			.fun-item {
				width: 25%;
				box-sizing: border-box;
				padding: 20rpx 0;

				.fun-item-img {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 10rpx;
				}

				.fun-item-title {}
			}

		}

	}
	
	.line{
		width: 100wh;
		height: 0.1px;
		margin: 0 30rpx;
		background-color: #543f3c;
	}


	.vip {
		position: relative;
		box-sizing: border-box;
		width: 100wh;
		height: 150rpx;
		margin: 30rpx;

		.img-bg {
			width: 100%;
			height: 150rpx;
		}

		.vip-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: left;
			align-items: center;
			margin: 0 20rpx;

			.vip-left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.left-top {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 30rpx;

					.img-vip {
						width: 80rpx;
						height: 80rpx;
					}

					.vip-title {
						font-size: 36rpx;
						color: #4a2200;
					}
				}

				.vip-content {
					font-size: 28rpx;
					color: #4a2200;
					margin-top: 30rpx;
				}
			}

			.vip-right {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-right: 40rpx;
				background-color: #fdf1d9;
				border: 2rpx solid #c09f7e;
				border-radius: 10rpx;
				padding: 15rpx 15rpx;

				.vip-btn {
					font-size: 28rpx;
					color: #4a2200;
				}

				.img-arrow {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>